const utils = require('./utils')
const webpack = require('webpack')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

/**
 * @type {import('webpack-cli').WebpackConfiguration}
 */
module.exports = {
  resolve: {
    alias: {
      frontend: utils.resolve('./src')
    }
  },
  entry: {
    index: [utils.resolve('src/js/index.ts'), utils.resolve('src/style/index.styl')],
    common: utils.resolve('src/style/common.styl'),
    layout: [utils.resolve('src/js/layout.ts'), utils.resolve('src/style/layout.styl')]
  },
  output: {
    publicPath: '/',
    filename: 'js/[name].[contenthash:8].js',
    path: utils.resolve('dist'),
    clean: true
  },
  module: {
    rules: [
      { test: /\.[tj]s$/i, use: ['babel-loader'], exclude: '/node_modules/' },
      { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },
      // { test: /\.(ts|png|mp4|css|map)$/i, use: ['cache-loader'] },
      { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/i, type: 'asset/resource' },
      { test: /\.pug$/, use: ['pug-loader'] },
      {
        test: /\.styl$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false } },
          'postcss-loader',
          'stylus-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: '版权所有，翻版必究',
    }),
    new WebpackManifestPlugin({
      filter(file) {
        return !/\.(map|png|jpeg|jpg|mp4)$/.test(file.path)
      },
      fileName: 'manifest.json'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    }),
    new HtmlWebpackPlugin({
      template: utils.resolve('src/views/index.pug'),
      filename: 'index.html',
      chunksSortMode: 'manual',
      chunks: ['vendor', 'helper', 'common', 'layout', 'index'],
      scriptLoading: 'blocking',
      inject: 'body',
      templateParameters: {
        layout: {
          nav: [
            { title: '首页' },
            { title: '产品中心' },
            { title: '解决方案' },
            { title: '产品价格' },
            { title: '客户案例' },
            { title: '联系我们' },
            { title: '关于我们' }
          ]
        }
      }
    })
  ],
  devServer: {
    hot: true,
    open: true,
    static: {
      directory: utils.resolve('dist')
    },
    client: {
      overlay: {
        errors: true,
        warnings: false
      },
      logging: 'info'
    },
    compress: true,
    port: 7490
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
        terserOptions: {
          compress: {
            // 删除所有 console.log
            drop_console: true,
            // 删除调试器语句
            drop_debugger: true,
            // 压缩时移除无效代码
            dead_code: true
          },
          format: {
            comments: 'some'
          }
        }
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 8,
          chunks: 'all',
          name: 'vendor',
          minSize: 0,
          test: /node_modules/
        },
        helper: {
          priority: 10,
          chunks: 'all',
          name: 'helper',
          minSize: 0,
          test: /@babel/
        }
      }
    }
  },
  devtool: 'source-map',
  mode: process.env.NODE_ENV || 'development',
  stats: {
    chunks: true,
    chunkModules: true,
    reasons: true,
    chunkOrigins: true
  }
}
